<template>
  <button @click="flag = !flag">案例切换</button>
  <hr />
  <div v-if="flag">
    <div>基本使用</div>
    <Basic />

    <hr />
    <div>自定义类名</div>
    <Custom></Custom>

    <hr />
    <div>结合使用 animate.css 动画库</div>
    <Animate></Animate>

    <hr />
    <div>transition 8个生命周期 结合gsap动画库</div>
    <LifeCircle></LifeCircle>
  </div>

  <!-- transition-group 案例 -->
  <div v-else>
    <div>transition-group过度列表</div>
    <TransitionGroupTest />

    <hr />
    <div>列表的移动过渡 move-class属性</div>
    <MoveClass></MoveClass>

    <hr />
    <div>状态过渡:数字 Svg 背景颜色等添加过度动画</div>
    <Condition></Condition>
  </div>
</template>

<script setup lang="ts">
import Basic from './Basic.vue';
import Custom from './Custom.vue';
import Animate from './Animate.vue';
import LifeCircle from './LifeCircle.vue';
import TransitionGroupTest from './TransitionGroupTest.vue';
import MoveClass from './MoveClass.vue';
import Condition from './Condition.vue';

import { ref } from 'vue';
const flag = ref<boolean>(true);
</script>
